<template>
  <z-modal
    :title="title"
    :width="600"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="名称" prop="title">
              <a-input placeholder="请输入名称" :disabled="disableSubmit" v-model.trim="form.title"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="路径" prop="path">
              <ZSyncSelectTag v-model="form.path" :options="oriDataList" @change="handleChangePath" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24" >
            <a-form-model-item label="路径path" >
              <a-input disabled v-model.trim="form.path"/>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24" >
            <a-form-model-item label="数据权限" >
              <a-switch disabled checked-children="可设置" un-checked-children="不可设置" v-model="form.hasCriteria" />
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="24" v-if="form.hasCriteria">
            <a-form-model-item label="前置处理器" >
              <a-input placeholder="请输入前置处理器" :disabled="disableSubmit" v-model.trim="form.preProcess"/>
            </a-form-model-item>
          </a-col>
           <a-col :span="24" >
            <a-form-model-item label="权限范围" >
              <a-select v-model="form.dataScope" allowClear :disabled="disableSubmit || !form.hasCriteria">
                <a-select-option :value="DATA_SCOPE.USER">按用户</a-select-option>
                <a-select-option :value="DATA_SCOPE.DEPT">按部门</a-select-option>
                <a-select-option :value="DATA_SCOPE.DEPT_AND_CHILD">部门及子部门</a-select-option>
                <a-select-option :value="DATA_SCOPE.SERVICE">按服务</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="form.dataScope === DATA_SCOPE.SERVICE">
            <a-form-model-item label="服务" prop="service">
              <a-input :disabled="disableSubmit" v-model="form.service"/>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24" >
            <a-form-model-item >
              <span slot="label">
                组件标识
                <a-tooltip title="项目名:组件名:功能标识,例如: system:MenuList:add">
                  <a-icon type="question-circle-o" />
                </a-tooltip>
              </span>
              <a-input placeholder="请输入组件标识" v-model="form.elementId" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item  label="描述">
              <a-input :disabled="disableSubmit" type="textarea" v-model="form.description"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { getAction } from '@/services/manage'
// import debounce from 'lodash/debounce'
import { DATA_SCOPE } from '@/store/mutation-types'
import ZSyncSelectTag from '@/components/dict/ZSyncSelectTag'
// const LOAD_NUM = 30 // 加载条数--可自定义
export default {
  name: 'AuthorityResModal',
  mixins: [ModalFormMixin],
  components: { ZSyncSelectTag },
  props: {
    parentId: String
  },
  data() {
    return {
      DATA_SCOPE,
      validatorRules: {
        title: [{ required: true, message: '请输入名称' }],
        path: [{ required: true, message: '请输入路径' }],
        service: [{ required: true, message: '请输入服务' }]
      },
      url: {
        add: '/res/data/add',
        edit: '/res/data/edit',
        apiList: '/res/data/api/list'
      },
      // pathOptions: [],
      oriDataList: [] // 原数据列表 -- 从接口获取
      // dataLoading: false, // 原数据列表的加载状态 -- 接口的响应状态
      // searchVal: '', // 搜索的内容
      // filterDataList: [], // 过滤的数据列表 -- 从dataList中过滤出含搜索内容的数据
      // renderedOptions: []// 已渲染的下拉列表
    }
  },
  watch: {
    'form.hasCriteria': {
      deep: true,
      immediate: true,
      handler(val) {
        if (!val) {
          this.$set(this.form, 'dataScope', null)
        }
      }
    }
  },
  methods: {
    addAfter() {
      this.getPathData()
    },
    editAfter() {
      this.getPathData()
    },
    classifyIntoFormData() {
      return {
        ...this.form,
        parentId: this.parentId
      }
    },
    getPathData() {
      getAction(this.url.apiList).then(res => {
        if (res.success) {
          const paths = []
          res.result.forEach(item => {
            const path = `${item.httpUrls[0]}:${item.hasCriteria}`
            if (!paths.includes(path)) { // 去除重复接口
              paths.push(path)
              this.oriDataList.push({
                label: item.httpUrls[0],
                value: item.httpUrls[0],
                hasCriteria: item.hasCriteria
              })
            }
          })
          // this.renderedOptions = this.oriDataList.slice(0, LOAD_NUM)
        }
      })
    },
    handleChangePath(value, select) {
      this.$set(this.form, 'hasCriteria', select.hasCriteria)
    }
  }
}
</script>

